<template>
    <div class="kehuxiangq">
         <div class="gr_title">
      <div class="fan" @click="fanhui">
        <img src="../assets/images/fanhui.png" height="21px" alt="" />
      </div>
      客户详情
      <div>
       <div class="shouye" @click="tianzhuanshouye"><img src="../assets/images/fanhuishouye.png" height="21px"  alt=""></div>
      </div>
    </div>
          <div class="ban">
             <div class="ban_title">
                 <img src="../assets/images/头像.png" alt="" height="63px">
                 <div>
                     <p style="color:#333;font-weight:700">名称:{{data.custName}}</p>
                     <p style="color:#666">电话:{{data.telephone}}</p>
                 </div>
                 <div class="kehuxinxi">
                     客户信息
                 </div>
             </div>
          </div>
    <van-tabs v-model="active">
        <van-tab><template #title> 
            <div style="text-align:center">
                <img src="../assets/images/收入分析.png" alt="" height="16px">
            </div>收入分析</template>
    <Srfx :srfx="srfx"/></van-tab>
        <van-tab><template #title> 
            <div style="text-align:center">
                <img src="../assets/images/旗下企业.png" alt="" height="16px">
        </div>旗下企业</template>
    <Qxqy :qxqy="qxqy"/></van-tab>
        <van-tab><template #title> 
            <div style="text-align:center">
                <img src="../assets/images/合作伙伴.png" alt="" height="16px">
        </div>合作伙伴</template>
    <Hzhb :hzhb="hzhb"/></van-tab>
        <van-tab><template #title> 
            <div style="text-align:center">
                <img src="../assets/images/合作伙伴.png" alt="" height="16px">
        </div>当年收入</template>
    <Dnsr :dnsr="dnsr"/></van-tab>
    </van-tabs>
    </div>
</template>

<script>
import { Aapicust } from "../requset/api"
import Srfx from './srfx.vue'
import Qxqy from "./qxqy.vue"
import Hzhb from "./hzhb.vue"
import Dnsr from "./dnsr.vue"
export default {
    data () {
        return {
         data:{},
         //收入分析数组
         srfx:[],
         //旗下企业数组
         qxqy:[],
         //合作伙伴
         hzhb:[],
         //当年收入数组
         dnsr:[],
         active:"标签 2"
        }
    },
    methods:{
        fanhui(){
        this.$router.back()
        },
        tianzhuanshouye(){
        this.$router.push('/')
        }
    },
    created(){
        console.log(this.$route.params.id);
        let id =this.$route.params.id
        Aapicust(id).then(res=>{
            console.log(res);
            if(res.errCode==0){
                this.data=res.data
                this.srfx=res.data.datas[0].data;
                this.qxqy= res.data.datas[3].data;
                this.hzhb=res.data.datas[2].data;
                this.dnsr=res.data.datas[1].data;
            }
        })
    },
    components:{
        Srfx,
        Qxqy,
        Dnsr,
        Hzhb
    }
}
</script>
 
<style lang = "less" scoped>
.kehuxiangq{
    width: 100%;
    min-height: 100vh;
    background: #fdfdfd;
      .gr_title {
    width: 100%;
    height: 43px;
    background-color: #003399;
    background-size: 80%;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    line-height: 43px;
    padding-right: 16px;
    .fan {
      line-height: 43px;
      margin-left: 10px;
      img {
        float: left;
      }
    }
    div {
      img {
        margin-top: 10px;
      }
    }
  }
  .ban{
      width: 100%;
      height: 145px;
      background:#003399 ;
      position: relative;
      left: 0;
      top: -1px;
      .ban_title{
          background: #fff;
          height: 95px;
          width: 320px;
          border-radius:10px 10px 0px 0px;
          position: absolute;
          left: 50%;
          bottom: 0;
          margin-left: -160px;
          display: flex;
          justify-content: space-between;
          box-sizing: border-box;
          padding-top: 19px;
          padding-left: 20px;
          .kehuxinxi{
              width: 58px;
              height: 20px;
              background: #ffcc33;
              border-radius: 10px 0px 0px 10px;
              font-size: 12px;
              line-height: 20px;
              color: #fff;
              text-align: center;
              
          }
      }
  }
  .van-tabs{
      /deep/.van-tabs__line{
          width: 60px;
          background: #ffcc33;
      }
       /deep/.van-tab--active{
          color: #003399;

      }
      
  }
  /deep/span,.van-tab__text,.van-tab__text--ellipsis {
    height: 40px;
}
  /* .van-tab{
      height: 50px;
  } */
}
  
</style>